<template>
    <div class="game">
        <my-canavas v-on:addCoin="addCoin()"></my-canavas>
        <div class="clearfix mlf15" id="control" v-if="playStatus">
            <my-buttons class="fl"></my-buttons>
            <my-button content="Go" myWidth="50" myHeight="50" borderR="50%" class="fr font22"></my-button>
            <add v-on:power="power()" :choice.sync="choice"></add>
        </div>
        <div class="mlf15" v-else id="reserve">
            <my-button :content="reserveContentd" myWidth="200" myHeight="35" borderR="5px"
                       @click.native="_reserve"></my-button>
            <add v-on:power="power()" :choice.sync="choice"></add>
        </div>
        <my-popup :popupStatus.sync="popupStatus" v-on:success="success()"></my-popup>
        <pay-ment :payStatus.sync="payStatus"></pay-ment>
        <slideslip :show.sync="slideStatus">
            <!--中间查询-->
            <div class="mySelect mt20" v-if="choice==3">
                <center><h3>中奖查询</h3></center>
                <small class="kong">你还没中奖哦！加油！</small>
                <ul>
                    <li>
                        <span>中奖编号：156498798</span>
                        <hr>
                        <span>最新物流信息：</span>
                        <span>广东省广州市天河区xx公司</span>
                        <span>地区签收中</span>
                        <span class="status">未签完</span>
                        <br>
                        <small>查详细整物流</small>
                    </li>
                    <li>
                        <span>中奖编号：156498798</span>
                        <hr>
                        <span>最新物流信息：</span>
                        <span>广东省广州市天河区xx公司</span>
                        <span>地区签收中</span>
                        <span class="status">未签完</span>
                        <br>
                        <small>查详细整物流</small>
                    </li>
                    <li>
                        <span>中奖编号：156498798</span>
                        <hr>
                        <span>最新物流信息：</span>
                        <span>广东省广州市天河区xx公司</span>
                        <span>地区签收中</span>
                        <span class="status">未签完</span>
                        <br>
                        <small>查详细整物流</small>
                    </li>
                    <li>
                        <span>中奖编号：156498798</span>
                        <hr>
                        <span>最新物流信息：</span>
                        <span>广东省广州市天河区xx公司</span>
                        <span>地区签收中</span>
                        <span class="status">未签完</span>
                        <br>
                        <small>查详细整物流</small>
                    </li>
                    <li>
                        <span>中奖编号：156498798</span>
                        <hr>
                        <span>最新物流信息：</span>
                        <span>广东省广州市天河区xx公司</span>
                        <span>地区签收中</span>
                        <span class="status">未签完</span>
                        <br>
                        <small>查详细整物流</small>
                    </li>
                </ul>
            </div>
            <!--大神榜单-->
            <div class="mylist mt20" v-if="choice==1">
                <h3>大神榜单</h3>
                <img src="../../../static/img/border.png" alt="" height="25px">
                <ul>
                    <li>1··························XXXXXXXX</li>
                    <li>2··························XXXXXXXX</li>
                    <li>3··························XXXXXXXX</li>
                    <li>4··························XXXXXXXX</li>
                    <li>5··························XXXXXXXX</li>
                    <li>6··························XXXXXXXX</li>
                    <li>7··························XXXXXXXX</li>
                    <li>8··························XXXXXXXX</li>
                    <li>9··························XXXXXXXX</li>
                    <li>10··························XXXXXXXX</li>
                </ul>
                <small class="mt35">您距离榜首仅差158名，继续加油！</small>
            </div>
            <!--发货地址-->
            <div class="myaddress mt20" v-if="choice==2">
                <center><h3>发货地址</h3></center>
                <ul>
                    <li><label for="myname">
                        <small>收件姓名</small>
                    </label><br>
                        <input type="text" id="myname" placeholder="请输入收件人姓名">
                    </li>
                    <li><label for="myaddress">
                        <small>收件地址</small>
                    </label><br>
                        <input type="text" id="myaddress" placeholder="请输入收件人地址">
                    </li>
                    <li><label for="myphone">
                        <small>手机号码</small>
                    </label><br>
                        <input type="text" id="myphone" placeholder="请输入收件人手机号码">
                    </li>
                    <li><label for="mypostal">
                        <small>邮政编号</small>
                    </label><br>
                        <input type="text" id="mypostal" placeholder="请输入收件地区邮政编码">
                    </li>
                    <li>
                        <input type="checkbox" id="default" width="10px !important">
                        <label for="default">设为默认收件地址</label>
                    </li>
                </ul>
                <div class="addressButton">
                    保存
                </div>
                <div class="addressButton">
                    取消
                </div>
            </div>
        </slideslip>
        <!--<winning status="true"></winning>-->
        <!--<nowinning status="true"></nowinning>-->
    </div>
</template>
<style lang="less">
    @import '../../less/s_game.less';
</style>
<script>
    import myCanavas from '../common/Canavas.vue'
    import myButton from '../common/button.vue'
    import myButtons from '../common/buttons.vue'
    import myPopup from '../common/popup/popup.vue'
    import payMent from '../common/payment.vue'
    import add from '../common/add.vue'
    import slideslip from '../common/slideslip.vue'
    import winning from '../common/popup/winning.vue'
    import nowinning from '../common/popup/nowinning.vue'

    export default {
        components: {
            myButtons: myButtons,
            myButton: myButton,
            myCanavas: myCanavas,
            myPopup: myPopup,
            payMent: payMent,
            slideslip: slideslip,
            add: add,
            winning: winning,
            nowinning: nowinning
        },
        data() {
            return {
                playStatus: false,
                reserveContentd: '预定游戏',
                test: 'dfsdfsdfs',
                popupStatus: false,
                payStatus: false,
                slideStatus: false,
                choice: ''
            }
        },
        methods: {
            _reserve() {
                this.popupStatus = true
            },
            success() {
                console.log('testtest')
                this.playStatus = true
            },
            addCoin() {
                this.payStatus = true
            },
            power() {
                this.slideStatus = true
            }
        },
        mounted() {
        }
    }
</script>